<template>
	<div class="card rdsp-card-view" data-page="policeStat">
		<div class="card-content" style="position: relative;">
			<div class="card-content card-content-padding">
				<div class="rdsp-card-title">警情统计
					<form id="date-typen">
						<select name="dateType" id="dateTypen" @change="drawChartn">
							<option value="7">最近一年</option>
							<option value="6" selected>最近一个月</option>
							<option value="4">最近24小时</option>
						</select>
					</form>
				</div>
                <div id="testChartn"></div>
                <div class="stat-content">
                    <div id="alertUnit1" style="background-color: #ff6e7d;"></div>
                    <div id="allUnit2" style="background-color: #fdc912;"></div>
                    <div id="faultUnit3" style="background-color: #b6b6b6;"></div>
                    <div id="faultUnit4" style="background-color: #e3e3e3;"></div>
                </div>
			</div>
		</div>
	</div>
</template>
<style>
    #testChartn {
    	width: 90%;
    	height: 230px;
    }
    #date-typen{
        float: right;
    }
    #dateTypen{
        font-size: 10px; 
        padding: 2px; 
        border: 1px solid; color: #1b9cd6;
    }
    .card-header:after{
        height: 0px !important;
    }
    .stat-content{
        position: absolute;
        top: 66px;
        right: 24px;
    }
    .stat-content div{
        width: 35px;
        height: 18px;
        line-height: 20px;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        margin-bottom: 26px;
    }
</style>
<script>
    return {
        beforeCreate() {
            $("#testChartn").empty();
            $("#alertUnit1,#allUnit2,#faultUnit3,#faultUnit4").html("");
        },
        methods: {
            drawChartn:function(){
            	var self = this;
        		var $ = self.$$;
                var app = this.$app;
                var formData = app.form.convertToData('#date-typen');
                var dateType=jQuery.trim(formData.dateType);
            	var fwNumn=0;
            	var gzNumn=0;
            	var bjNumn=0;
            	var pbNumn=0;
            	var firnum=0;
            	var shunum=0;
            	var shinum=0;
                var id_org="";
                if (single_Orgid == ""){
                    id_org=userInfor.organizationIds;
                }else {
                    id_org=single_Orgid;
                }
        	 Dao.getPolice_zzt({
                 userName:userInfor.accountName,
                 deviceId:appKeyObj.deviceId,
                 organizationIds:id_org,
                 timeType:dateType
    		 }, function (data) {
        	    for (var i=0;i<data.length;i++){
                    var listdata=data[i];
                    if (listdata.fireTType==10){
                        bjNumn=listdata.occurCount;
                        firnum=listdata.resetCount;
    				}
                    if (listdata.fireTType==20){
                        gzNumn=listdata.occurCount;
                        shunum=listdata.resetCount;
                    }
                    if (listdata.fireTType==30){
                        pbNumn=listdata.occurCount;
                        shinum=listdata.resetCount;
                    }
    			}
                fwNumn=firnum+shunum+shinum;
        		$("#alertUnit1").html(common.transNullundefined(bjNumn.toString()));
        		$("#allUnit2").html(common.transNullundefined(gzNumn.toString()));
        		$("#faultUnit3").html(common.transNullundefined(pbNumn.toString())); 
        		$("#faultUnit4").html(common.transNullundefined(fwNumn.toString())); 
        		self.shartDrawEcahrt(fwNumn, pbNumn, gzNumn, bjNumn);
        	 });
            },
            shartDrawEcahrt:function(fwNumn, pbNumn, gzNumn, bjNumn){
                var myChart = echarts.init(document.getElementById('testChartn'));
                option = {
                    color: ['#3398DB'],
                    tooltip : {},
                    grid: {
                       top:'8%',
                       left: '1%',
                       right: '5%',
                       bottom: '8%',
                       containLabel: true
                    },
                    
                    yAxis : [
                        {
                            splitLine:{
                                show:false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color:chatFontColor,
                                    fontSize: '12'
                                }
                            },
                            axisLine:{  
                                lineStyle:{  
                                    color:chatLineColor, 
                                }  
                            },
                            type : 'category',
                            data : ['复位', '屏蔽','故障','报警', ],
                            axisTick: {
                                show: false
                            }   
                        }
                    ],
                    xAxis : [
                        {
                            type : 'value',
                            minInterval: 1,
                            splitLine:{
                                 show:false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color:chatFontColor,
                                    fontSize: '12',
                                }
                            },
                            axisLine:{  
                                lineStyle:{  
                                     color:chatLineColor,  
                                }  
                            },
                            axisTick: {
                                show: false
                            }   
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            data:[fwNumn, pbNumn, gzNumn, bjNumn],
                            barGap:1,
                            barWidth: '25%',
                            itemStyle:{
                                 normal:{
                                    color:'#54a1ff',
                                    barBorderRadius:[0, 8, 8, 0]
                                 }
                            },
                            axisLabel : {
                                formatter: '{value}',
                                textStyle: {
                                    color: '#666'
                                }
                            }
                       }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }	 
        },
        on: {
            pageAfterIn: function(e, page) {
                var self = this;
                self.drawChartn();
            }
        }
        
    }
</script>
